<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/artist.css" />
		<link rel="stylesheet" type="text/css" href="../css/state-icons.css"/>
		<link rel="stylesheet" type="text/css" href="../css/pullToRefresh.css" />
		<link rel="stylesheet" type="text/css" href="../css/scrollToTop.css"/>
	</head>

	<body>
		<!--返回顶部-->
		<a id="scrollToTop" class="backTop hide">
		    <i class="iconfont">&#xe602;</i>
		</a>
		<!--清空所有条件 借用scrollToTop.css-->
		<a id="clear" class="backTop hide">
		    <i class="iconfont">&#xe6c0;</i>
		</a>
		<div class="mui-content">
			<div class="mui-scroll-wrapper" id="pullrefresh">
				<div class="mui-scroll" id="scroll-main">
					<div class="filter-bar">
						<a class="filter-item" id="filteritem1" href="#filterbody1">
							<span class="filter-value">全部帮办</span>
							<span class="mui-icon mui-icon-arrowdown"></span>
						</a>
						<a class="filter-item" id="filteritem2" href="#filterbody2">
							<span class="filter-value">综合排序</span>
							<span class="mui-icon mui-icon-arrowdown"></span>
						</a>
					</div>
					<div id="filterbody1" class="mui-popover" value="0">
						<div class="mui-popover-arrow"></div>
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll filterbody">
								<ul class="filter-body">
									<li class="mui-table-view-cell" value="0">
										<span class="filter-list-value">全部帮办</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="1">
										<span class="filter-list-value">搬家</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="2">
										<span class="filter-list-value">保姆</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="3">
										<span class="filter-list-value">维修</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="4">
										<span class="filter-list-value">摄影</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="5">
										<span class="filter-list-value">婚庆</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="6">
										<span class="filter-list-value">送餐</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="7">
										<span class="filter-list-value">服务员</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="8">
										<span class="filter-list-value">会场布置</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="9">
										<span class="filter-list-value">司仪驻唱</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="10">
										<span class="filter-list-value">礼仪模特</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="11">
										<span class="filter-list-value">传单派发</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="12">
										<span class="filter-list-value">游戏代练</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="13">
										<span class="filter-list-value">代驾</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="14">
										<span class="filter-list-value">代购</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="15">
										<span class="filter-list-value">同城跑腿</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="16">
										<span class="filter-list-value">更多帮办</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="filterbody2" class="mui-popover" value="0">
						<div class="mui-popover-arrow"></div>
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll filterbody">
								<ul class="filter-body">
									<li class="mui-table-view-cell" value="0">
										<span class="filter-list-value">综合排序</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="1">
										<span class="filter-list-value">价格从高到低</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="2">
										<span class="filter-list-value">价格从低到高</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="3">
										<span class="filter-list-value">人气从高到低</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
									<li class="mui-table-view-cell" value="4">
										<span class="filter-list-value">人气从低到高</span>
										<i class="iconfont">&#xe60a;</i>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<ul class="mui-table-view" id="artshow-list">
						<div class="backdrop"><!--遮罩层--></div>
						<!--<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
								<div class="mui-media-body">
									<h5 class="artshow-title mui-ellipsis">
										12月10日南城需要主持人
									</h5>
									<p class="artshow-address mui-ellipsis">东莞</p>
									<p class="artshow-time-status">
										12-08
										<span class="status s-state1 state-icon">报名中</span>
									</p>
									<p class="artshow-price-signup">
										<lable>薪酬：</lable><span class="salary">￥1200.0</span>
										<span class="signup-count mui-pull-right"><span class="count">2</span>人报名</span>
									</p>
									<i class="iconfont signup-success">&#xe61c;</i>
								</div>
							</a>
						</li>-->
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/scrollToTop.js" type="text/javascript" charset="utf-8"></script>
	<script>
		mui.plusReady(function() {
			var pullRefresh;
			var artshowFilter = Common.defaultArtshowFilter;
			var artshowList = document.getElementById("artshow-list");
			var self = plus.webview.currentWebview();
			var clearbtn = document.getElementById("clear");
			var firstShow = true; // 页面第一次加载、登录状态改变时自动刷新
			var indexPage = plus.webview.getLaunchWebview();
			var notFound = null; // 筛选为空
			mui.init();
			self.addEventListener('show', function() {
				// 第一次显示此页则自动加载列表
				if(firstShow) {
					pullRefresh.pullDownLoading();
				}
				firstShow = false;
			})

			// 离开此页时，收起筛选菜单，隐藏遮罩层
			self.addEventListener('hide', function() {
				mui('.mui-popover').popover('hide');
				$backdrop.hide();
			})

			mui('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration: 0.01
			});

			mui.ready(function() {
				// 初始化下拉刷新，上拉加载。
				pullRefresh = mui('#scroll-main').pullToRefresh({
					down: {
						callback: pulldownRefresh
					},
					up: {
						callback: pullupRefresh
					}
				});
			});

			document.addEventListener('artshowKey', function() {
				// 进行关键字搜索时，清空筛选、排序条件
				plus.storage.removeItem('artshowFilter');
				resetPage();
				setTimeout(function() {
					pullRefresh.pullDownLoading();
					$(clearbtn).removeClass('hide');
				}, 650)
			})
			
			document.addEventListener('stateChange', function() {
				firstShow = true;
			})
			
			// 清空所有条件
	        mui('body').on('tap', '#clear', function() {
	        	// 清空搜索栏
	        	mui.fire(indexPage, 'clear', {});
	        	plus.storage.removeItem('artshowFilter');
	        	plus.storage.removeItem('artshowKey');
	        	resetPage();
	        	setTimeout(function() {
					pullRefresh.pullDownLoading();
					$(clearbtn).addClass('hide');
				}, 200)
	        	mui('#pullrefresh').scroll().scrollTo(0, 0, 500);
	        })

			// 筛选BEGIN==================================
			var $backdrop = $(".backdrop");
			mui(".filter-bar").on('tap', '#filteritem1,#filteritem2', function() {
				setTimeout(function() {
					if($("#filterbody1,#filterbody2").hasClass('mui-active')) {
						$backdrop.show();
					} else {
						$backdrop.hide();
					}
				}, 100)
			})

			mui(artshowList).on('touchstart', '.backdrop', function() {
				$(this).hide();
				mui('.mui-popover').popover('hide');
				return false;
			})

			mui("#filterbody1,#filterbody2").on('tap', '.mui-table-view-cell', function() {
				var parent = $(this).parents('.mui-popover')[0];
				$(this).find('i').show().end().siblings().find('i').hide();
				mui(parent).popover('hide');
				$backdrop.hide();
				$(parent.id == 'filterbody1' ? "#filteritem1" : "#filteritem2").find('.filter-value').text($(this).find('.filter-list-value').text());
				$(this).parents('.mui-popover').attr('value', this.value);
				changeFilter();
			})

			function changeFilter() {
				// 进行筛选、排序时，清空搜索关键字
				plus.storage.removeItem('artshowKey');
				mui.fire(indexPage, 'clear', {});
				mui('.mui-popover').popover('hide');
				artshowFilter.type = Number($("#filterbody1").attr('value'));
				artshowFilter.order = Number($("#filterbody2").attr('value'));
				//mui.toast(JSON.stringify(artshowFilter));
				plus.storage.setItem('artshowFilter', JSON.stringify(artshowFilter));
				pullRefresh.pullDownLoading();
			}
			
			function resetPage() {
				mui('.mui-popover').popover('hide');
				$backdrop.hide();
				$("#filterbody1").attr('value', 0).find('li')
					.find('i').hide().end().first().find('i').show();
				$("#filterbody2").attr('value', 0).find('li')
					.find('i').hide().end().first().find('i').show();
				$("#filteritem1 .filter-value").text('全部帮办');
				$("#filteritem2 .filter-value").text('综合排序');
			}
			// 筛选END==================================

			document.addEventListener('artshowFilter', function() {
				//mui.toast('receive artshowFilter from storage-->' + plus.storage.getItem('artshowFilter'));
				var type = JSON.parse(plus.storage.getItem('artshowFilter')).type;
				var thisCell = $('#filterbody1 .mui-table-view-cell[value=' + type + ']');
				thisCell.find('i').show().end().siblings().find('i').hide();
				$("#filteritem1 .filter-value").text(Common.artshowType[type - 1]);
				$("#filterbody1").attr('value', type);
				setTimeout(function() {
					pullRefresh.pullDownLoading();
					$(clearbtn).removeClass('hide');
				}, 500)
			})

			// 初始化懒加载
			var lazyLoad = mui(artshowList).imageLazyload({
				placeholder: '../images/holder2.png',
				autoDestroy: false
			});

			var viewPage = 1; // 当前显示演艺页数

			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				console.log('artshowFilter: ' + plus.storage.getItem('artshowFilter'));
				console.log('artshowKey: ' + plus.storage.getItem('artshowKey'));
				viewPage = 1;
				// 筛选、排序为空时提示
				var hasFilter = false;
				var url = baseURL + 'perf/list.json';
				if(plus.storage.getItem('artshowFilter')) {
					var data = JSON.parse(plus.storage.getItem('artshowFilter'));
					if(data.type || data.order) {
						hasFilter = true;
						$(clearbtn).removeClass('hide');
						console.log('帮办筛选排序');
						url += Common.toURL(JSON.parse(plus.storage.getItem('artshowFilter')));
					} else {
						$(clearbtn).addClass('hide');
					}
				} else {
					if(plus.storage.getItem('artshowKey')) {
						hasFilter = true;
						$(clearbtn).removeClass('hide');
						console.log('帮办关键字');
						url += '?key=' + plus.storage.getItem('artshowKey');
					} else {
						$(clearbtn).addClass('hide');
					}
				}
				console.log(url);
				Common.ajax({
					url : url
				}, function(data) {
					console.log(JSON.stringify(data));
					$(artshowList).find('.mui-table-view-cell').remove();
					if(data.length) {
						$(notFound).remove();
						$(artshowList).show();
						$(".mui-pull-bottom-wrapper").show();
						for(var i = 0; i < data.length; i++) {
							var headSrc = Common.artshowPic + data[i].id + data[i].picPath + '?' + Math.random();
							createArtshowList(data[i].id, headSrc, data[i].titile, data[i].city, data[i].time, data[i].signupNum,
								(data[i].salary/ 100).toFixed(0), data[i].signupState);
						}
					} else {
						if(hasFilter) {
							$(notFound).remove();
							$(".mui-pull-bottom-wrapper").hide();
							notFound = Common.showState(artshowList, '&#xe610;', '什么都没找到，换个条件试试吧', 30);
						}
					}
					lazyLoad.refresh(true);
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				pullRefresh.refresh(true); // 重新激活上拉加载
				setTimeout(function() {
					pullRefresh.endPullDownToRefresh(); //refresh completed
				}, 500)
			}

			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				var url = baseURL + 'perf/list/' + (++viewPage) + '.json';
				console.log(url);
				Common.ajax({
					url : url
				}, function(data) {
					console.log(JSON.stringify(data));
					for(var i = 0; i < data.length; i++) {
						var headSrc = Common.artshowPic + data[i].id + data[i].picPath + '?' + Math.random();
						createArtshowList(data[i].id, headSrc, data[i].titile, data[i].city, data[i].time, data[i].signupNum,
							(data[i].salary/ 100).toFixed(0), data[i].signupState);
					}
					pullRefresh.endPullUpToRefresh((data.length == 0)); //参数为true代表没有更多数据了。
					lazyLoad.refresh(true);
				}, function(xhr) {
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					mui.toast('网络异常，请稍后再试');
					pullRefresh.endPullUpToRefresh(true);
				})
			}

			/**
			 * @param {Object} id			演艺id
			 * @param {Object} src			演艺图片路径
			 * @param {Object} title		演艺标题
			 * @param {Object} address		地址
			 * @param {Object} time			时间
			 * @param {Object} signupCount	报名人数
			 * @param {Object} price		演艺价格
			 * @param {Object} status		报名状态
			 */
			function createArtshowList(id, src, title, address, time, signupCount, price, status) {
				var li = document.createElement('li');
				li.className = 'mui-table-view-cell mui-media';
				li.id = id;
				var liStr = '<a href="javascript:;"><img class="mui-media-object mui-pull-left" data-lazyload="' + src + '">';
				liStr += '<div class="mui-media-body"><h5 class="artshow-title mui-ellipsis">' + title + '</h5><p class="artshow-address  mui-ellipsis">';
				liStr += address + '</p><p class="artshow-time-status">' + time + '<span class="status sign-up-state-' + status;
				liStr += ' state-icon">' + (!status ? '停止报名' : '报名中') + '</span></p><p class="artshow-price-signup">';
				liStr += '<lable>薪酬：</lable><span class="salary">￥' + price + '</span><span class="signup-count mui-pull-right">';
				liStr += '<span class="count">' + signupCount + '</span>人报名</span></p>';
				if(status == 2) {
					liStr += '<i class="iconfont signup-success">&#xe61c;</i></div></a>';
				} else {
					liStr += '</div></a>';
				}
				li.innerHTML = liStr;
				artshowList.appendChild(li);
			}

			// 点击进入演艺详情
			mui(artshowList).on('tap', '.mui-table-view-cell', function(e) {
				plus.nativeUI.showWaiting();
				Common.openWindow('artshow-detail.html', {
					artshowId: this.id,
					type : 1 // 2 为我报名参加的演艺
				});
			});
		})
	</script>
</html>